<template>
	<view class="add">
		<text class="add-title">可以开始制定计划啦～</text>
		<view class="operate">
			<input class="title" maxlength="25" type="text" :value="title" @input="inputChange" placeholder="请输入计划标题"/>
			<radio-group @change="radioChange" style="font-size: 16px;">
				<label class="radio" style="margin-right: 20rpx;">
					<radio value="今日计划" style="margin-right: 10rpx;"/><text>今日计划</text>
				</label>
				<label class="radio">
					<radio value="明日计划" checked  style="margin-right: 10rpx;"/><text>明日计划</text>
				</label>
			</radio-group>
			<textarea class="content" maxlength="500" :value="content" @input="textAreaChange" placeholder="请输入计划内容"/>
			<button class="cu-btn line-green" @click="addNewPlan">确认定制</button>
		</view>
	</view>
</template>

<script>
import moment from 'moment'
// import {mapState} from 'vuex'

import {getRequest} from '../../https.js'
export default{
	data() {
		return {
			title: '',
			content: '',
			radio: '明日计划'
		}
	},
	// computed: {
	// 	...mapState({
	// 		todayPlan: 'todayPlan'
	// 	})
	// },
	methods: {
		addNewPlan(){
			if (this.title === '' || this.content === '') {
				uni.showToast({
					title: '骚凹瑞～标题或内容不能为空！',
					icon: 'none',
				})
				return
			}
			getRequest( 'phpbin/tomorrowplan/addPlan.php',{
					title: this.title,
					content: this.content,
					date: this.radio === '明日计划' ? moment().add(1, 'days').format('YYYY-MM-DD') : moment().format('YYYY-MM-DD')
				}
			).then(res => {
				uni.showToast({
					title: '计划制定成功！'
				})
			})
		},
		inputChange(e){
			this.title = e.detail.value
		},
		radioChange(e){
			this.radio = e.target.value
		},
		textAreaChange(e){
			this.content = e.detail.value
		},
	},
}
</script>

<style lang="scss">
.add{
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
	.add-title{
		font-size: 18px;
		text-align: center;
		font-weight: bold;
		color: $uni-color-primary;
		margin: 30rpx 0;
	}
	.operate{
		padding: 0 20rpx;
		.title{
			padding: 10rpx;
			height: 80rpx;
			border: 1px solid #ccc;
			border-radius: 16rpx;
			margin: 20rpx 0;
		}
		.content{
			padding: 10rpx;
			border: 1px solid #ccc;
			border-radius: 16rpx;
			margin: 20rpx 0;
		}
	}
}
</style>
